// 空置
<template>
  <div class="home-chart-box">
    <el-table :border="false" :data="sourceData.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" max-height="300" stripe>
      <el-table-column align="left" label="资产编号">
        <template slot-scope="scope">
          <span>{{ scope.row.assetName || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="资产类型">
        <template slot-scope="scope">
          <span>{{ scope.row.assetTypeName || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="面积(m²)">
        <template slot-scope="scope">
          <span>{{scope.row.cadArea || '--'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="空置开始时间">
        <template slot-scope="scope">
          <span v-if="scope.row.emptyDate">{{scope.row.emptyDate | formatDate('YYYY-MM-DD')}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="空置天数">
        <template slot-scope="scope">
          <span>{{ scope.row.emptyDays ? scope.row.emptyDays + '天' : '无租赁记录' }}</span>
        </template>
      </el-table-column>
      
    </el-table>

    <div class="text-align-right margin-top-20">
      <el-pagination
        :hide-on-single-page="true"
        :current-page.sync="pageNumber"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="sourceData.length">
      </el-pagination>
    </div>

    <room-dialog ref="roomDialog" :model="aeestModel" :show-btn="false"></room-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { apiDetailRoom } from '@a/about';
  import RoomDialog from '@/common/components/assetDialog/roomDialog.vue';
  import { toFixedTwo } from '@/common/js/utils';

  export default {
    name: 'arrerage',
    props: {
      //欠费类型 operation:运营视图 group:集团视图
      pageType: {
        type: String,
        default: '',
      },
      sourceData: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        pageSize: 4,
        pageNumber: 1,
        aeestModel: {},
      };
    },

    methods: {
      async getRoomInfo(code, contractKey) {
        let res = await apiDetailRoom({ code: code });
        res.contractKey = contractKey;
        res.code = code;
        this.aeestModel = res;
        await this.$nextTick();
        this.$refs.roomDialog.getAssetInfo();
      },
      showDialog(row) {
        return
        this.getRoomInfo(row.assetKey);
        this.$refs.roomDialog.dialogShow = true;
        this.$refs.roomDialog.activeTab = 'asset';
      },
      getColor(num) {
        num = Number(num)
        if (num > 0 && num < 33) {
          return '#3384FE';
        } else if (num >= 33 && num < 66) {
          return '#F79100';
        } else {
          return '#FF0000';
        }
      },
      getNum(num) {
        num = Number(num);
        num = num * 100;
        num = toFixedTwo(num)
        num = num > 100 ? 100 : num;
        return num;
      },
    },

    components: { RoomDialog },
  };
</script>

<style lang="scss" scoped></style>
